<template>
  <div class="duoshangpin">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="
            height: 91px;
            border-bottom: 1px solid rgb(227, 232, 241);
            width: 100%;
            padding: 0 30px;
          "
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"
              >直播推广</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/zhibotuiguang/danshangpin' }"
              >单商品管理</el-breadcrumb-item
            >
          </el-breadcrumb>
          <top></top>
        </div>
        <div
          style="
            padding: 37px 30px 0 30px;
            height: calc(100vh - 91px);
            overflow: auto;
          "
        >
          <div
            class="tishi"
            style="
              color: rgb(0, 90, 255);
              font-size: 12px;
              background: rgb(222, 233, 251);
              border-radius: 10px;
              padding: 10px 20px;
              margin-bottom: 20px;
            "
          >
            商品销售页是单商品的下单链接，用户直接进入商品展示页，可用于代客下单及信息流推广等
          </div>

          <div class="flex">
            <div style="margin-right: 20px">
              <el-button @click="chuangjian" type="primary" round
                >添加商品</el-button
              >
            </div>
          </div>

          <div style="margin-top: 20px">
            <el-table :data="list" style="width: 100%">
              <el-table-column
                width="240"
                show-overflow-tooltip="true"
                align="center"
                prop="sale_name"
                label="商品名称"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="pv"
                label="PV"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="uv"
                label="UV"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="saled"
                label="已销售"
              ></el-table-column>
              <el-table-column align="center" label="销售页链接">
                <template slot-scope="scope">
                  <div class="flexcc" style="justify-content: flex-start;">
                    <div
                      @click="copy2(scope.row)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-right: 20px;
                        cursor: pointer;
                      "
                    >
                      复制链接
                    </div>
                    <div
                      @click="creatQrCode(scope.row)"
                      style="color: rgb(0, 90, 255); cursor: pointer"
                    >
                      下载二维码
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="ok_count"
                label="操作"
              >
                <template slot-scope="scope">
                  <div class="flexcc" style="justify-content: flex-start;">
                    <div
                      @click="bianjishop(scope.row)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-right: 20px;
                        cursor: pointer;
                      "
                    >
                      编辑
                    </div>
                    <div
                      @click="delbtn(scope.row)"
                      style="color: rgb(0, 90, 255); cursor: pointer"
                    >
                      删除
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- <div class="flex tableh">
            <div class="tablehli">商品名称</div>
            <div class="tablehli">PV</div>
            <div class="tablehli">UV</div>
            <div class="tablehli">已销售</div>
            <div class="tablehli">销售页链接</div>
            <div class="tablehli">操作</div>
          </div>
          <div class="flex tableb" v-for="(item,index) in list" :key="index" >
            <div class="tablebli">{{ item.sale_name }}</div>
            <div class="tablebli">{{ item.pv }}</div>
            <div class="tablebli">{{ item.uv }}</div>
            <div class="tablebli">{{ item.saled }}</div>
            <div class="tablebli">
              <el-button @click="copy2(item)" type="text">复制链接</el-button>
              <el-button @click="creatQrCode(item)" type="text">下载二维码</el-button>
            </div>
            <div class="tablebli">
              <el-button @click="bianjishop(item)" type="text">编辑</el-button>
              <el-button @click="delbtn(item)" type="text">删除</el-button>
            </div>
          </div> -->

            <el-pagination
              style="text-align: right; padding: 20px"
              background
              layout="prev,pager,next,total,jumper"
              :page-size="search.page_size"
              @current-change="pagechange"
              :total="total"
            ></el-pagination>
            <!-- <footers></footers> -->
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="添加商品"
      :visible.sync="log2"
      center
      :close-on-click-modal="false"
      width="1000px"
    >
      <div class="flex" style="margin-bottom: 20px">
        <div style="margin-right: 30px">
          <div style="margin-bottom: 10px">商品名称</div>
          <div>
            <el-input
              v-model="search2.title"
              placeholder="请输入商品名称"
            ></el-input>
          </div>
        </div>
        <div style="margin-right: 30px">
          <div style="margin-bottom: 10px">商品编码</div>
          <div>
            <el-input
              v-model="search2.fetch_code"
              placeholder="请输入商品编码"
            ></el-input>
          </div>
        </div>
        <div>
          <div style="height: 29px"></div>
          <el-button round type="primary" @click="getlist2">检索</el-button>
        </div>
      </div>
      <div
        class="flexbc"
        style="
          background: rgb(255, 255, 255);
          box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 20px;
        "
        v-for="item in list2"
        :key="item.id"
      >
        <div class="flexc" style="width: 700px">
          <div>
            <img
              :src="
                item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'
              "
              style="width: 100px; height: 100px; margin-right: 20px"
            />
          </div>
          <div>
            <div
              style="
                color: rgb(2, 12, 29);
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
              "
            >
              {{ item.title }}
            </div>
            <div style="color: rgb(113, 115, 117); margin-bottom: 10px">
              编码：{{ item.fetch_code }}
            </div>
            <div style="color: rgb(175, 179, 188)">
              创建时间：{{ item.created_at }}
            </div>
          </div>
        </div>
        <div>
          <el-button round type="primary" plain @click="tianjiashop(item)"
            >添加商品 +</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="title + '二维码'"
      :visible.sync="img_log5"
      center
      width="420px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="flexcc">
        <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto"></div>
      </div>
      <div
        style="text-align: center; color: rgb(26, 18, 243); margin-top: 30px"
        @click="xiazai"
      >
        保存二维码
      </div>
    </el-dialog>

    <div
      v-if="shoujiban"
      style="
        color: rgb(2, 12, 29);
        font-size: 0.24rem;
        background: #f6f8fb;
        padding-top: 1rem;
      "
    >
      <van-popup
        v-model="load"
        style="background: transparent; color: #fff"
        :close-on-click-overlay="false"
      >
        <van-loading size="24px">加载中...</van-loading>
      </van-popup>

      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem">
        <div class="flexc" style="margin-bottom: 0.3rem">
          <div
            style="
              width: 2px;
              height: 0.2rem;
              background: rgb(2, 12, 29);
              margin-right: 10px;
              overflow: hidden;
            "
          ></div>
          <div style="font-size: 0.36rem; font-weight: bold">直播推广</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem">
          <div style="color: rgb(175, 179, 188)">首页</div>
          <div style="margin: 0 0.2rem; color: rgb(175, 179, 188)">·</div>
          <div style="color: rgb(175, 179, 188)">直播推广</div>
          <div style="margin: 0 0.2rem; color: rgb(175, 179, 188)">·</div>
          <div>单商品页</div>
        </div>
      </div>
      <div style="padding: 0.3rem">
        <div
          class="tishi"
          style="
            color: rgb(0, 90, 255);
            background: rgb(222, 233, 251);
            border-radius: 0.1rem;
            padding: 0.1rem 0.2rem;
          "
        >
          商品销售页是单商品的下单链接，用户直接进入商品展示页，可用于代客下单及信息流推广等
        </div>

        <div class="flex" style="margin: 0.3rem 0">
          <div style="margin-right: 0.2rem">
            <el-button @click="chuangjian" type="primary" round
              >添加商品</el-button
            >
          </div>
        </div>

        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            v-for="item in list"
            :key="item.id"
            style="
              background: #fff;
              padding: 0.2rem;
              margin-bottom: 0.2rem;
              border-radius: 0.2rem;
            "
          >
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>商品名称</div>
              <div>{{ item.sale_name }}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>PV</div>
              <div>{{ item.pv }}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>UV</div>
              <div>{{ item.uv }}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>已销售</div>
              <div>{{ item.saled }}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>销售页链接</div>
              <div class="flexc">
                <div
                  @click="copy2(item)"
                  style="
                    color: rgb(0, 90, 255);
                    margin-right: 20px;
                    cursor: pointer;
                  "
                >
                  复制链接
                </div>
                <div
                  @click="creatQrCode(item)"
                  style="
                    color: rgb(0, 90, 255);
                    margin-right: 20px;
                    cursor: pointer;
                  "
                >
                  下载二维码
                </div>
              </div>
            </div>

            <div class="flexc">
              <div
                @click="bianjishop(item)"
                style="
                  color: rgb(0, 90, 255);
                  margin-right: 20px;
                  cursor: pointer;
                "
              >
                编辑
              </div>
              <div
                @click="delbtn(item)"
                style="color: rgb(0, 90, 255); cursor: pointer"
              >
                删除
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import QRCode from "qrcodejs2";
import topandleft from "../topandleft.vue";
export default {
  name: "duoshangpin",
  components: {
    left,
    top,
    topandleft,
    footers,
  },
  data() {
    return {
      all: {
        flow_id: 0,
        page_id: "",
      },
      log: false,
      log2: false,
      search2: {
        page: 1,
        page_size: 20,
        status: 100,
        title: "",
        selling_point: "",
        order: "",
        fetch_code: "",
      },
      search: {
        page: 1,
        page_size: 20,
        tab: this.$route.query.id,
      },
      total: 0,
      list: [],
      list2: [],

      img_log5: false,
      title: "",

      shoujiban: false,
      loading: false,
      finished: false,

      load: true,
    };
  },
  created() {
    //列表
    // this.getlist()
  },
  mounted() {
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;

      this.load = false;
      // this.onLoad()
    } else {
      this.getlist();
    }
    this.getlist2();
  },
  methods: {
    onLoad() {
      axios.get("/own/fpage/list", { params: this.search }).then((response) => {
        if (response.data.msg.code == 0) {
          if (response.data.data.data.length > 0) {
            response.data.data.data.forEach((item) => {
              this.list.push(item);
            });

            if (this.list.length >= response.data.data.total) {
              this.finished = true;
            } else {
              this.search.page++;
              this.loading = false;
            }
          }
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //复制链接和生成二维码用的是/h5?id=${item.id}`
    copy2: function (item) {
      this.copy(`${window.location.origin}/h5/order?id=${item.id}&one=1`);
    },
    creatQrCode(item) {
      this.title = item.sale_name;
      this.img_log5 = true;
      this.$nextTick(() => {
        this.$refs.qrCodeUrl.innerHTML = "";
        let url = `${window.location.origin}/h5/order?id=${item.id}&one=1`;
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: url, // 需要转换为二维码的内容
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
    xiazai: function () {
      let img = document.getElementsByClassName("qrcode")[0].childNodes[1];
      var a = document.createElement("a");
      a.download = "erweima"; //这边是文件名，可以自定义
      a.href = img.src;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    chuangjian: function () {
      this.all = {
        flow_id: 0,
        page_id: "",
      };
      this.log2 = true;
    },
    tianjiashop: function (item) {
      this.$router.push({
        path: "/zhibotuiguang/shangpinfabu",
        query: {
          flow_id: 0,
          page_id: item.id,
          type: "add",
          one: 1,
        },
      });
    },
    bianjishop: function (item) {
      this.$router.push({
        path: "/zhibotuiguang/shangpinfabu",
        query: {
          id: item.id,
          type: "fix",
          one: 1,
        },
      });
    },
    getlist: function () {
      axios.get("/own/fpage/list", { params: this.search }).then((response) => {
        if (response.data.msg.code == 0) {
          this.list = response.data.data.data;
          this.total = response.data.data.total;
          this.loading = false;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //列表
    getlist2: function () {
      axios.get("/own/page/list", { params: this.search2 }).then((response) => {
        if (response.data.msg.code == 0) {
          this.list2 = response.data.data.data;
          this.loading = false;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //分页
    pagechange(val) {
      console.log(val);
      this.search.page = val;
      //列表
      this.getlist();
    },
    //搜索
    searchbtn() {
      this.search.page = 1;
      this.getlist();
    },
    //删除
    delbtn(item) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .post("/own/fpage/delete", {
              id: item.id,
            })
            .then((response) => {
              if (response.data.msg.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.getlist();
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style scoped>
.t_over_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
}
</style>
